<template>
  <list-layout
    channel="cases">
    <div class="list-top-text">
      {{$t('应用示范案例')}}
      <filter-options ref="filterOptions" class="filter-options"
        :hasKw="true"
        :bottomKw="true"
        :opts="filterOptions"
        :showSelected="false"
        :maxLines="3"
        @search="filter({query: $event})"></filter-options>
    </div>
    <div class="full-width row items-start q-gutter-xl q-mt-lg">
      <q-card flat bordered square v-for="(item,index) in data.docs" :key="index"
        class="case-card cursor-pointer"
        :class="{hover:hoverCard===index}"
        @mouseover="hoverCard=index"
        @mouseleave="hoverCard=''"
        @click="$router.push(`/cases/${item.id}`)"
        style="min-width:300px;max-width:300px;min-height:438px">
        <img :src="item.图片?.id | serverImage" alt=""
          style="width:unset;height:140px;margin:0 auto;">
        <q-card-section>
          <div class="case-title text-bold text-center ellipsis">{{item.名称}}</div>
        </q-card-section>
        <q-card-section>
          <div class="case-description ellipsis-3-lines"
            style="-webkit-line-clamp:5">{{item.详情}}</div>
        </q-card-section>
        <q-card-section>
          <div class="case-industries row items-center justify-center q-gutter-md">
            <div class="case-industry row no-wrap items-center q-px-md q-py-xs bg-grey-3"
              v-for="(ind, idx) in item.领域"
              :key="idx">
              <img v-if="ind.Image && ind.Image?.id"
                :src="ind.Image?.id | serverImage" alt="" style="height:20px;width:20px;">
              <div class="ellipsis q-ml-xs">{{ind.Label || idx}}</div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
    <!-- <list-item
      v-for="(item,index) in data.docs" :key="index"
      :tags="[item.类型, item.领域]"
      :date="item.日期"
      :title="item.名称"
      :content="item.详情 || item.名称"
      :url="`/cases/${item.id}`"></list-item> -->

    <div
      v-if="data && data.total === 0"
      class="no-data-label">
      <div class="absolute-center">
        {{$t('暂无数据')}}
      </div>
    </div>

    <!-- 列表页面注意分页 -->
    <!-- 翻页时调用: refreshData({page: <页吗>}) -->
    <pagination v-if="data && data.total" :data="data" @changed="pageChanged"></pagination>
  </list-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnLocaleChange } from '../../components/mixins/locale';
import listLayout from '../../components/listLayout.vue';
// import listItem from '../../components/listItem.vue';
import pagination from '../../components/pagination.vue';
import FilterOptions from '../../components/filterOptions.vue';

export default {
  name: 'PolicyList',
  mixins: [mixins.ObjectDataMixin, RefreshOnLocaleChange],
  components: {
    // listItem,
    listLayout,
    pagination,
    FilterOptions,
  },
  data() {
    return {
      filters: {},
      filterOptions: [
        {
          label: '领域',
          field: '领域',
          multiple: false,
          options: [
            {
              label: '工业制造',
              value: '工业制造',
            },
            {
              label: '物流',
              value: '物流',
            },
            {
              label: '医疗健康',
              value: '医疗健康',
            },
            {
              label: '交通',
              value: '交通',
            },
            {
              label: '安防',
              value: '安防',
            },
            {
              label: '其他',
              value: '其他',
            },
          ],
        },
      ],
      hoverCard: '',
    };
  },
  methods: {
    afterRefresh() {
      this.Bus.$store.commit('portal/CLEAR_FILTERS');
    },
    pageChanged(p) {
      this.refreshData({ ...this.filters, page: p });
    },
    filter(filters) {
      const { query } = filters;

      this.filters = query || {};

      this.refreshData({ ...this.filters });
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-options {
  font-size: 14px;
}

.case-card {
  &.hover {
    border-color: $primary;

    .case-title {
      color: $primary;
    }
  }

  .case-industries {
    max-height: 90px;
    overflow: hidden;

    .case-industry {
      overflow: hidden;
    }
  }
}
</style>
